<script setup lang="ts">
import {ref} from "vue";
import {showToast} from "vant";
import {useI18n} from "vue-i18n";
import {useRouter} from "vue-router";
import {useStore} from "vuex";
import {bindUsdt} from "@/api/usdtApi.ts";
const {t} = useI18n()

const router = useRouter();
const store = useStore();

const form = ref({
  address:'',
  network:'trc20'
})

const submit = () => {

  if (form.value.address == '') {
    showToast(t('placeholder.addressEmpty'));
    return false;
  }

  if (form.value.network == '') {
    showToast(t('placeholder.networkEmpty'));
    return false;
  }

  store.state.loadingState = true;
  bindUsdt({
    address: form.value.address,
    network: form.value.network
  }).then(res => {
    showToast(res.msg);
    store.state.loadingState = false;
    if (res.code == 0) {
      router.push({name: 'bindCardExcess'})
    }
  })
}

</script>

<template>
    <div class="bindUsdt">
      <div class="form">
        <div class="field-item">
          <label>{{ $t('bindUsdt.address') }}</label>
          <input type="text" :placeholder="$t('placeholder.addressEmpty')" v-model="form.address"/>
        </div>
        <div class="field-item">
          <label>{{ $t('bindUsdt.network') }}</label>
          <van-radio-group v-model="form.network" direction="horizontal" style="width: 80%">
            <van-radio name="trc20">trc20</van-radio>
            <van-radio name="erc20">erc20</van-radio>
          </van-radio-group>
        </div>
      </div>

      <div class="btn" @click="submit()">
        <span>{{ $t('bindUsdt.btn') }}</span>
      </div>
    </div>
</template>

<style scoped lang="less">
@import "../../less/bindUsdt.less";
</style>